{% extends 'layout/indexframe.html' %}

{% block title %}own{% endblock %}

{% block css %}
    <style>
        th {
            font-size: 20px;
            text-align: center;
        }

        td {
            font-size: 20px;
            text-align: center;
        }

        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }
    </style>
{% endblock %}

{% block content %}

    <div class="wrapper wrapper-content animated fadeInRight">
        <div style="margin-bottom: 10px;" class="clearfix">
            <div><a id="adddev" class="btn btn-primary" href="#">
                添加设备</a>
                <div style="float:right;width: 300px;">
                    <form method="get">
                        <div class="input-group">

                            <input type="text" name="q" class="form-control" placeholder="输入设备名查询..."
                                   value={{ value }}>
                            <span class="input-group-btn">
                        <button class="btn btn-primary" type="submit">查询</button>
                    </span>

                        </div>
                    </form>
                </div>
            </div>

            {# 设备表单#}
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h1 class="modal-title" style="text-align: center;" id="myModalLabel">
                                <strong>添加设备</strong></h1>
                        </div>
                        <div class="modal-body">
                            <form id="formadd">

                                <div class="clearfix">
                                    {% for field in form %}
                                        {#class="col-xs-6"#}
                                        <div>
                                            <div class="form-group">
                                                <label><strong>{{ field.label }}</strong></label>
                                                {{ field }}
                                                <span class="error-msg">{{ field.errors.0 }}</span>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <input id="formSub" type="button" class="btn btn-primary" value="保存设备">
                        </div>
                    </div>
                </div>
            </div>


            {# 设备详情 #}
            <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h1 class="modal-title" style="text-align: center;" id="myModalLabel">设备详情</h1>
                        </div>
                        <div class="modal-body">
                            <form id="formchange">
                                <div class="clearfix">

                                    <div>
                                        <div class="form-group">
                                            {% for field1 in form1 %}
                                                <label>{{ field1.label }}</label>
                                                {{ field1 }}
                                                <span class="error-msg">{{ field.errors.0 }}</span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input id="btnchange" type="button" class="btn btn-primary" value="修改">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" style="font-size: 40px;text-align: center;background-color: #9ea6b9;">设备组</div>
            <table class="table">
                <thead>
                <tr>
                    <th>所有者</th>
                    <th>设备名</th>
                    <th>Topic</th>
                    <th>符号</th>
                    <th>详情</th>
                    <th>保存时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <th>{{ request.name }}</th>
                        <td>{{ obj.devname }}</td>
                        <td>{{ obj.devtopic }}</td>
                        <td>{{ obj.devsym }}</td>
                        <td>{{ obj.detail }}</td>
                        <td>{{ obj.devrecord }}</td>
                        <td>{{ obj.flag }}</td>
                        <td>
                            <input uid="{{ obj.id }}" type="button" class="btn btn-primary btn-edit" style='font-size:20px;' value="详情/编辑">
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div style="text-align: center;">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-lg">
                    {{ page_str }}
                </ul>
            </nav>
        </div>


    </div>

    </div>
{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            $('#devown').addClass('active')
        });
    </script>
    <script>
        $(function () {
            bindadddev();
            binddetail();
            binddetailSub();
        })

        function bindadddev() {
            $('#adddev').click(function () {
                $('#myModal').modal('show');
            });
        }

        function binddetail() {
            $('.btn-edit').click(function () {
                var uid = $(this).attr("uid");

                $.ajax({
                    url: "/web/device/detail/",
                    type: "get",
                    data: {uid: uid},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $.each(res.data, function (name, value) {
                                $('#id_' + name + '1').val(value);
                            })
                            $('#myModal2').modal('show');
                            document.getElementById("id_mobile_phone1").readOnly = true;
                            document.getElementById("id_send_flag1").disabled = "disabled";
                            document.getElementById("id_devrecord1").readOnly = true;
                            document.getElementById("id_devtopic1").readOnly = true;

                        } else {
                            alert(res.error);
                        }
                    }
                })


            });
        }

        function binddetailSub() {
            $('#btnchange').click(function () {
                $('.error-msg').empty();
                $("#id_send_flag1").removeAttr("disabled");
                $.ajax({
                    url: "/web/device/detail/",
                    type: "POST",
                    data: $('#formchange').serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#myModal2').modal('hide');
                            location.href = '/web/device/own/';


                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key +'1').next().text(value[0]);
                            })
                        }

                    }
                })
            })
        }

    </script>
    <script>
        $(function () {
            bindadddev();
        })

        function bindadddev() {
            $('#adddev').click(function () {
                $('#myModal').modal('show');

                document.getElementById("id_mobile_phone").value ={{ request.tracer.mobile_phone }};
                document.getElementById("id_mobile_phone").readOnly = true;

            });
        }

    </script>
    <script>
        $(function () {
            bindformSub();
        })

        function bindformSub() {
            $('#formSub').click(function () {
                $('.error-msg').empty();
                $.ajax({
                    url: "/web/device/add/",
                    type: "POST",
                    data: $('#formadd').serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {

                            $('#myModal').modal('hide');
                            location.href = '/web/device/own/';

                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>

{% endblock %}